<script lang="ts" setup>
import { Page } from "@vben/common-ui";
import { Button, message, Tooltip } from "ant-design-vue";
import { useVbenForm } from "#/adapter/form";
import { transformData } from "./schemas";
import { info, save } from "#/api/system/config";
import { h, onMounted } from "vue";
import { MailTwoTone } from "@ant-design/icons-vue";

const fieldLink={
  Host:'SMTP服务器',
  Port:'SMTP端口',
  Username:'SMTP用户名',
  Password:'SMTP密码',
  SMTPSecure:'SMTP验证方式',
  From:'默认发件人',
  FromName:'默认发件人名称',
  email:'测试地址',

}

const [BaseForm, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  layout: "horizontal",
  wrapperClass: "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
  commonConfig: {
    labelWidth: 120,
  },
  resetButtonOptions: {
    show: false,
  },
  submitButtonOptions: {
    show: false,
  },
  schema: [
    {
      fieldName: "Host",
      label: fieldLink.Host,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
      rules: "required",
    },
    {
      fieldName: "Port",
      label: fieldLink.Port,
      component: "Input",
      componentProps: {
        placeholder: "请输入站点名称",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
      rules: "required",
    },
    {
      fieldName: "Username",
      label: fieldLink.Username,
      component: "Input",
      componentProps: {
        placeholder: "",
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: "Password",
      label: fieldLink.Password,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: "SMTPSecure",
      label: fieldLink.SMTPSecure,
      component: "RadioGroup",
      defaultValue: "ssl",
      componentProps: {
        options: [
          {
            label: "ssl",
            value: "ssl",
          },
          {
            label: "tsl",
            value: "tsl",
          },
        ],
      },
      formItemClass: "w-full md:w-1/2",
      rules: "selectRequired",
    },

    {
      fieldName: "From",
      label: fieldLink.From,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: "FromName",
      label: fieldLink.FromName,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: "email",
      label: fieldLink.email,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      renderComponentContent: (_values: any) => {
        return {
          addonAfter: () => {
            return h(
              Tooltip,
              { title: "发送测试邮件", placement: "right" },
              {
                default: () =>
                  h(MailTwoTone, {
                    onClick() {
                      console.log("发起测试邮件");
                    },
                  }),
              }
            );
          },
        };
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: "btn",
      label: "",
      component: () => {
        return h("div", { class: "flex space-x-2" }, [
          h(
            Button,
            {
              type: "primary",
              onClick: onSubmit.bind(null),
            },
            {
              default() {
                return "保存提交";
              },
            }
          ),
        ]);
      },
      componentProps: {},
      formItemClass: "col-span-1",
    },
  ],
});

function onSubmit() {
  formApi.validate().then(async (e: any) => {
    if (e.valid) {
      const values = await formApi.getValues();
      const data = transformData(values, ["btn", "email"], [], {
        group_code: "email_setting",
      },fieldLink);
      save(data).then(() => {
        message.success("保存成功");
        retrieveData();
      });
    }
  });
}

/**
 * 获取表单数据
 */
const retrieveData = async () => {
  const record = await info({ group_code: "email_setting" });
  await formApi.setValues({ ...record });
};

onMounted(async () => {
  retrieveData();
});
</script>

<template>
  <Page content-class="flex flex-col gap-4">
    <BaseForm />
  </Page>
</template>

<style lange="scss">
.label-left {
  display: flex; /* 确保使用 flexbox */
  justify-content: flex-start; /* 靠左对齐 */
  width: 100px;
  text-align: left;
}
</style>
